/**
 *  @auth: sce
 *  @date: 17-12-29
 *  @desc:
 **/
import React, {Component} from 'react';
import './Calculator.css'

const calculatorMap = [
    [
        {
            text: 'C',
            value: 'clear',
            type: 'aider',
            cell: '1'
        },
        {
            text: '+/-',
            value:'symbol',
            type: 'operation',
            cell: '1'
        },
        {
            text: 'Del',
            value: 'delete',
            type: 'aider',
            cell: '1'
        },
        {
            text: '/',
            type: 'operation',
            value: 'division',
            cell: '1'
        }
    ],
    [
        {
            text: 7,
            type: 'number',
            value: 7,
            cell: '1'
        },
        {
            text: 8,
            value: 8,
            type: 'number',
            cell: '1'
        },
        {
            text: 9,
            value: 9,
            type: 'number',
            cell: '1'
        },
        {
            text: '*',
            value: 'multiply',
            type: 'operation',
            cell: '1'
        }
    ],
    [
        {
            text: 4,
            value: 4,
            type: 'number',
            cell: '1'
        },
        {
            text: 5,
            value: 5,
            type: 'number',
            cell: '1'
        },
        {
            text: 6,
            value: 6,
            type: 'number',
            cell: '1'
        },
        {
            text: '-',
            value: 'subtraction',
            type: 'operation',
            cell: '1'
        }
    ],
    [
        {
            text: 1,
            value: 1,
            type: 'number',
            cell: '1'
        },
        {
            text: 2,
            value: 2,
            type: 'number',
            cell: '1'
        },
        {
            text: 3,
            value: 3,
            type: 'number',
            cell: '1'
        },
        {
            text: '+',
            value: 'increase',
            type: 'operation',
            cell: '1'
        }
    ],
    [
        {
            text: 0,
            value: 0,
            type: 'number',
            cell: '2'
        },
        {
            text: '.',
            value: '.',
            type: 'number',
            cell: '1'
        },
        {
            text: '=',
            value: 'equal',
            type: 'equal',
            cell: '1'
        }
    ]
];

class Calculator extends Component{
    constructor(){
        super();
        this.state = {
            currentType: null
        }
    }
    onClickBtn = ({type, value,text}) =>{
    };
    render(){
        const {express} = this.props;
        return (
            <div className="calculator">
                <div className="screen" >
                    {express}
                </div>
                <div className='box'>
                    {
                        calculatorMap.map((row, index) => (
                            <div className='row' key={index}>
                                {
                                    row.map((cell,_index) => (
                                        <div
                                            key={_index}
                                            onClick={() => this.onClickBtn(cell)}
                                            className={`cell-${cell.cell}`}>
                                            {cell.text}
                                        </div>
                                    ))
                                }
                            </div>
                        ))
                    }
                </div>
            </div>
        )
    }
}

export default Calculator;